<template>
    <div class="main">
        <Header class="main_header"/>
        <div style="height: 63px;"></div>
        <div class="main_body">
            <div class="main_left">
                <div class="main_left_title">
                    <div class="main_left_title_body">
                        <strong>{{ problem.title }}</strong>
                        <img class="main_left_title_img" @click="playVoice" src="@/assets/img/article/播放.png"
                             alt="播放">
                    </div>
                </div>
                <div class="main_left_button">
                    <el-button @click="showModalFirstReply" class="main_left_button_1" type="primary">写回答</el-button>
                    <el-button @click="showInviteVisible" class="main_left_button_2" type="primary" plain>邀请回答
                    </el-button>
                    <el-button v-if="isReportProblem===false" @click="showReportVisible" class="main_left_button_3"
                               type="danger">
                        举报问题
                    </el-button>
                    <el-button v-else class="main_left_button_3" type="danger" plain>已举报</el-button>
                    <el-button v-if="problem.solve==='0'" class="main_left_button_4" type="warning">未解决</el-button>
                    <el-button v-else class="main_left_button_4" type="success">已解决</el-button>
                </div>
                <div class="main_left_statistical">
                    <div class="main_left_statistical_1">好问题：{{ problem.likeCount }}</div>
                    <div class="main_left_statistical_2">评论数：{{ problem.reply }}</div>
                    <div class="main_left_statistical_3">浏览量：{{ problem.views }}</div>
                </div>
                <h2 class="main_left_answer">回答区</h2>
                <div class="main_left_answer_body">
                    <a-spin :spinning="spinning" :tip="'加载中'" :delay="100">
                        <div v-for="(item,index) in firstAndSecondList" class="main_left_answer_body_one_for"
                             :key="item.id">
                            <div class="main_left_answer_body_one">
                                <img :src="item.avatar" class="main_left_answer_body_one_img" alt="头像"/>
                                <div>
                                    <div class="main_left_answer_body_one_nickname">{{ item.nickname }}</div>
                                    <div class="main_left_answer_body_one_createTime">{{ item.createTime }}</div>
                                </div>
                            </div>
                            <div v-dompurify-html="item.content" class="main_left_answer_body_two_content"></div>
                            <div class="main_left_answer_body_three">
                                <div class="main_left_answer_body_three_like_if">
                                    <img @click="userLikeReply(item.id,index)" v-if="item.isLike===1"
                                         src="../../../../assets/img/answer/点赞.png"
                                         class="main_left_answer_body_three_like_img" alt="点赞"/>
                                    <img @click="userLikeReply(item.id,index)" v-else
                                         src="../../../../assets/img/answer/未点赞.png"
                                         class="main_left_answer_body_three_like_img" alt="未点赞"/>
                                    <div class="main_left_answer_body_three_like_count">{{ item.likeCount }}</div>
                                </div>
                                <el-button @click="showModalSecondReply(item)" class="main_left_answer_body_three_reply"
                                           type="primary"
                                           plain>回复
                                </el-button>
                                <el-button v-if="problem.userId === reply.userId" @click="handleReplyTop(item.id)"
                                           class="main_left_answer_body_three_top" type="danger" plain>
                                    置顶
                                </el-button>
                            </div>
                            <div v-for="item2 in item.secondReplyList">
                                <div class="main_left_answer_body_four">
                                    <div v-if="item2.secondUserId===-1">
                                        <div class="main_left_answer_body_four_for">
                                            <img :src="item2.secondTwoAvatar" class="main_left_answer_body_four_img"
                                                 alt="用户头像"/>
                                            <div>
                                                <div class="main_left_answer_body_four_nickname">
                                                    {{ item2.secondTwoNickname }}
                                                </div>
                                                <div class="main_left_answer_body_four_createTime">{{
                                                    item2.createTime
                                                    }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="main_left_answer_body_four_content" v-html="item2.content"></div>
                                        <el-button @click="showModalMuchReply(item2)"
                                                   class="main_left_answer_body_four_nickname_reply_2"
                                                   type="primary" plain>回复
                                        </el-button>
                                    </div>
                                    <div v-else>
                                        <div class="main_left_answer_body_four_for">
                                            <img :src="item2.secondTwoAvatar" class="main_left_answer_body_four_img"
                                                 alt="用户头像"/>
                                            <div>
                                                <div class="main_left_answer_body_four_nickname">
                                                    {{ item2.secondTwoNickname }}
                                                </div>
                                                <div class="main_left_answer_body_four_createTime">{{
                                                    item2.createTime
                                                    }}
                                                </div>
                                            </div>
                                            <div class="main_left_answer_body_four_for_reply">回复</div>
                                            <img :src="item2.secondOneAvatar" class="main_left_answer_body_four_img_2"
                                                 alt="用户头像"/>
                                            <div>
                                                <div class="main_left_answer_body_four_nickname_2">
                                                    {{ item2.secondOneNickname }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="main_left_answer_body_four_content" v-html="item2.content"></div>
                                        <el-button @click="showModalMuchReply(item2)"
                                                   class="main_left_answer_body_four_nickname_reply_2"
                                                   type="primary" plain>回复
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a-spin>
                </div>
            </div>
            <div style="flex: 3;"></div>
            <div class="main_right">
                <UploadProblem/>
                <div class="main_right_user">
                    <div class="main_right_user_title">关于作者</div>
                    <div class="main_right_user_body_1">
                        <img :src="userinfo.avatar" class="main_right_user_body_1_avatar" alt="头像">
                        <div class="main_right_user_body_1_nickname">{{ userinfo.nickname }}</div>
                    </div>
                    <div class="main_right_user_body_2">
                        <div class="main_right_user_body_2_1">
                            <div>回答</div>
                            <div class="main_right_user_body_2_1_count">{{ userinfo.replyCount }}</div>
                        </div>
                        <div class="main_right_user_body_2_2">
                            <div>关注</div>
                            <div class="main_right_user_body_2_2_count">{{ userinfo.attentionCount }}</div>
                        </div>
                        <div class="main_right_user_body_2_3">
                            <div>粉丝</div>
                            <div class="main_right_user_body_2_3_count">{{ userinfo.fansCount }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 一级评论的对话框 -->
            <a-modal
                    v-model:visible="visibleFirstReply"
                    title="回答"
                    :confirm-loading="confirmLoading"
                    @ok="handleOkFirstReply"
                    @cancel="handleCancelFirstReply"
                    cancelText="取消"
                    okText="确认"
            >
                <MyEditor @sendContent="receiveChildContent"/>
            </a-modal>

            <!-- 二级评论的对话框 -->
            <a-modal
                    v-model:visible="visibleSecondReply"
                    title="回答"
                    :confirm-loading="confirmLoading"
                    @ok="handleOkSecondReply"
                    @cancel="handleCancelSecondReply"
                    cancelText="取消"
                    okText="确认"
            >
                <MyEditor @sendContent="receiveChildContent"/>
            </a-modal>

            <!-- 多级评论的对话框 -->
            <a-modal
                    v-model:visible="visibleMuchReply"
                    title="回答"
                    :confirm-loading="confirmLoading"
                    @ok="handleOkMuchReply"
                    @cancel="handleCancelMuchReply"
                    cancelText="取消"
                    okText="确认"
            >
                <MyEditor @sendContent="receiveChildContent"/>
            </a-modal>
            <a-modal v-model:visible="inviteVisible" title="推荐列表" @ok="inviteVisible = false">
                <div v-for="item in recommendList" :key="item.id">
                    <div style="display: flex;">
                        <img :src="item.avatar" style="width: 70px;height: 70px;padding: 5px;border-radius: 50%;"
                             alt="用户头像">
                        <div style="line-height: 35px">
                            <div>{{ item.nickname }}</div>
                            <div>回答数：{{ item.replyCount }}</div>
                        </div>
                        <div style="margin-left: auto;line-height: 70px;">
                            <a-button @click="handleInviteUser(item.id)" type="primary">邀请</a-button>
                        </div>
                    </div>
                </div>
            </a-modal>
            <a-modal v-model:visible="reportVisible" title="举报问题" @ok="handleReportProblem">
                <a-auto-complete
                        v-model:value="report.content"
                        :options="options"
                        style="width: 450px"
                        placeholder="请输入举报的内容"
                        :filter-option="filterOption"
                />
            </a-modal>
        </div>
    </div>
</template>

<script setup lang="ts">
import Header from '@/components/header/index.vue'
import {useRoute} from "vue-router";
import {
    deleteImg, getFirstAndSecondReply,
    getProblemById, getRecommendList,
    getUserinfoById, getUserIsReportProblem,
    handleReply, inviteUser,
    likeReply, replyTop, reportProblem, saveUserBrowse, secondReply,
    selectReplyGiveALive
} from "@/api/home/answer";
import {createVNode, onMounted, ref} from "vue";
import {
    Answer,
    Browse,
    Comments, Invite,
    Reply,
    ReplyGiveALike,
    ReplyGiveALikeParams, Report,
    SecondReplyParams
} from "@/model/home/answer";
import UploadProblem from '@/views/home/answer/uploadProblem/index.vue'
import {Userinfo} from "@/model/personalCenter/userinfo";
import MyEditor from "@/components/myRichText/answerEditor/index.vue";
// @ts-ignore
import Publish from 'pubsub-js'
// @ts-ignore
import cookie from 'js-cookie'
import {getText, isNull} from "@/utils/checkoutEditor";
import {checkUserLogin} from "@/utils/getUser";
import {saveScrollLocation} from "@/utils/storageScrollLocation"
import lodash from "lodash";
import {message, Modal} from "ant-design-vue";
import {FireTwoTone} from "@ant-design/icons-vue";

//是否显示加载中
const spinning = ref<boolean>(true);

//是否显示回复框
const visible = ref<boolean>(false);

const Route = useRoute()

//获取路由参数  即问题id
const problemId: any = Route.query.id

//推荐列表
const recommendList = ref()

//是否显示举报对话框
const reportVisible = ref<boolean>(false)

//语音功能
const synth = window.speechSynthesis;
const speechMessage = new SpeechSynthesisUtterance();

//语音停止标识符
const is_speak = ref<number>(1)

//语音播放的事件
const playVoice = () => {
    if (is_speak.value) {
        handleSpeak(problem.value.title) // 传入需要播放的文字
    } else {
        handleStop(problem.value.title)
    }
}
//语音播报的函数
const handleSpeak = (text: string) => {
    speechMessage.text = text;     // 文字内容
    speechMessage.lang = "zh-CN";  // 使用的语言:中文
    speechMessage.volume = 1;      // 声音音量：1
    speechMessage.rate = 0.8;        // 语速：1
    speechMessage.pitch = 1;       // 音高：1
    synth.speak(speechMessage);    // 播放
    is_speak.value = 0
}
//语音停止
const handleStop = (e: any) => {
    speechMessage.text = e;
    speechMessage.lang = "zh-CN";
    synth.cancel();
    is_speak.value = 1
}

interface Option {
    value: string;
}

//是否根据输入项进行筛选
const filterOption = (input: string, option: Option) => {
    return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0;
};

//自动完成的数据源
const options = ref<Option[]>([
    {value: '违法违规'},
    {value: '垃圾广告'},
    {value: '涉嫌侵权'},
    {value: '网络暴力'},
    {value: '色情低俗'},
    {value: '不实信息'},
    {value: '抄袭我的内容'},
    {value: '扰乱社区秩序'},
])

//当前用户是否已经举报这个问题
const isReportProblem = ref<boolean>(false)

//根据用户id查询用户是否举报了当前这个问题
const handleUserIsReportProblem = () => {
    getUserIsReportProblem(report.value.userId, problemId).then((res) => {
        isReportProblem.value = res.data.data.count != 0;
    })
}

//用户举报问题需要的参数
const report = ref<Report>({
    userId: 0,
    problemId: 0,
    content: ''
})

//显示举报对话框
const showReportVisible = async () => {
    if (!await checkUserLogin()) {
        message.warn('未登录，无法举报')
    } else {
        report.value.problemId = problemId
        reportVisible.value = true
    }
}

//用户举报问题
const handleReportProblem = () => {
    if (report.value.userId === 0) {
        message.error('网络异常，请稍后重试！')
    } else if (report.value.content != '') {
        reportVisible.value = false
        reportProblem(report.value).then((res) => {
            isReportProblem.value = true
            message.success(res.data.message)
        })
    } else {
        message.warn("请填写举报的内容！")
    }
}

//获取推荐邀请列表
const handleRecommendList = () => {
    getRecommendList(invite.value.inviter).then((res) => {
        recommendList.value = res.data.data.list
    })
}

//邀请用户回答问题需要的参数
const invite = ref<Invite>({
    recipient: 0,
    inviter: 0,
    problemId: 0,
})

//是否显示邀请对话框
const inviteVisible = ref<boolean>(false);

//显示邀请对话框
const showInviteVisible = async () => {
    if (!await checkUserLogin()) {
        message.warn('未登录，无法邀请')
    } else {
        inviteVisible.value = true
        invite.value.problemId = problemId
    }
}

//邀请用户回答问题
const handleInviteUser = (userId: number) => {
    invite.value.recipient = userId
    Modal.confirm({
        title: '你确定要邀请他么?',
        icon: createVNode(FireTwoTone),
        okText: '确认',
        cancelText: '取消',
        onOk() {
            return new Promise((resolve, reject) => {
                setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
                inviteUser(invite.value).then(() => {
                    message.success("邀请成功")
                })
            }).catch(() => console.log('Oops errors!'));
        },
        onCancel() {
        },
    })
}

//问题回复置顶
const handleReplyTop = (id: number) => {
    replyTop(problemId, id).then((res) => {
        message.success(res.data.message)
        handleFirstAndSecondReply()
        //保存页面滚动条位置
        saveScrollLocation()
        //懒加载
        setTimeout(() => {
            userIsGiveALikeReply()
        }, 100)
    })
}

//问题信息
const problem = ref<Answer>({
    id: 0,
    title: '',
    userId: 0,
    nickname: '',
    avatar: '',
    views: 0,
    likeCount: 0,
    reply: 0,
    solve: '',
    createTime: new Date(),
    updateTime: new Date(),
    isLike: 0
})

//作者信息
const userinfo = ref<Userinfo>({
    id: 0,
    mobile: '',
    nickname: '',
    sex: '',
    birthday: new Date(),
    avatar: '',
    email: '',
    integral: 0,
    introduction: '',
    fansCount: 0,
    attentionCount: 0,
    replyCount: 0
})

//一级和二级回复列表
const firstAndSecondList = ref<Comments[]>([])

//根据问题id获取一级和二级回复
const handleFirstAndSecondReply = () => {
    getFirstAndSecondReply(problemId).then((res) => {
        firstAndSecondList.value = res.data.data.list
        const regex = new RegExp('<img', 'gi')
        firstAndSecondList.value.map((item) => {
            item.content = item.content.replace(regex, `<img style="max-width: 100%; height: auto"`)
            item.secondReplyList.map((item2) => {
                item2.content = item2.content.replace(regex, `<img style="max-width: 100%; height: auto"`)
            })
        })
    })
}

//评论点赞所需的参数
const replyGiveALike = ref<ReplyGiveALikeParams>({
    problemId: problemId,
    parentId: 0,
    userId: 0
})

//判断当前用户是否点赞
const userIsGiveALikeReply = () => {
    for (let i = 0; i < firstAndSecondList.value.length; i++) {
        for (let j = 0; j < userReplyGiveALikeList.value.length; j++) {
            if (firstAndSecondList.value[i].id === userReplyGiveALikeList.value[j].parentId) {
                firstAndSecondList.value[i].isLike = userReplyGiveALikeList.value[j].isLike
                break;
            } else {
                firstAndSecondList.value[i].isLike = 0
            }
        }
    }
    //保存页面滚动条位置
    saveScrollLocation()
}

//当前用户的点赞列表
const userReplyGiveALikeList = ref<ReplyGiveALike[]>([])

//根据问题id和用户id查询用户点赞信息
const getReplyGiveALikeList = async () => {
    const res = await selectReplyGiveALive(problemId, replyGiveALike.value.userId)
    userReplyGiveALikeList.value = res.data.data.list
    //判断当前用户是否点赞
    userIsGiveALikeReply()
}

//问题回复点赞
const userLikeReply = lodash.throttle(async (parentId: number, index: number) => {
    replyGiveALike.value.parentId = parentId
    if (!await checkUserLogin()) {
        message.warn('未登录，无法点赞')
    } else {
        likeReply(replyGiveALike.value).then(() => {
            firstAndSecondList.value[index].isLike = firstAndSecondList.value[index].isLike === 1 ? 0 : 1;
            //如果点赞，则点赞人数+1
            if (firstAndSecondList.value[index].isLike === 1) {
                message.success("点赞成功")
                firstAndSecondList.value[index].likeCount = firstAndSecondList.value[index].likeCount + 1
            } else {
                message.error("取消点赞")
                firstAndSecondList.value[index].likeCount = firstAndSecondList.value[index].likeCount - 1
            }
        })
    }
}, 500)

//根据id获取用户信息(作者)
const getUserinfo = () => {
    if (problem.value.userId === 0) {
        message.error('网络异常，请稍后重试！')
    } else {
        getUserinfoById(problem.value.userId).then((res) => {
            userinfo.value = res.data.data.user
        })
    }
}

//根据问题id获取问题信息(作者)
const getProblem = async () => {
    if (problemId === 0) {
        message.error('网络异常，请稍后重试！')
    } else {
        const res = await getProblemById(problemId)
        problem.value = res.data.data.problem
        //根据id获取用户信息(作者)
        getUserinfo()
        setTimeout(async () => {
            //根据问题id和用户id查询用户点赞信息
            await getReplyGiveALikeList()
            spinning.value = false
        }, 1000)
    }
}

//一级评论对话框
const visibleFirstReply = ref<boolean>(false);
//二级评论对话框
const visibleSecondReply = ref<boolean>(false);
//多级评论对话框
const visibleMuchReply = ref<boolean>(false);
const confirmLoading = ref<boolean>(false);

//是否显示对话框(一级评论)
const showModalFirstReply = () => {
    if (cookie.get("userinfo") == null) {
        message.warn('未登录，无法回复')
        return;
    } else {
        visibleFirstReply.value = true;
    }
};

//是否显示对话框(二级评论)
const showModalSecondReply = (row: any) => {
    if (cookie.get("userinfo") == null) {
        message.warn('未登录，无法回复')
        return;
    } else {
        visibleSecondReply.value = true;
        secondReplyParams.value.firstId = row.id
        secondReplyParams.value.secondUserId = -1
        secondReplyParams.value.secondOneNickname = row.nickname
        secondReplyParams.value.secondOneAvatar = row.avatar
    }
};

//是否显示对话框(多级评论) 点击多级回复触发的事件   获取当前点击的多级评论用户信息
const showModalMuchReply = (row: any) => {
    if (cookie.get("userinfo") == null) {
        message.warn('未登录，无法回复')
        return;
    } else {
        visibleSecondReply.value = true;
        secondReplyParams.value.firstId = row.firstId
        secondReplyParams.value.secondUserId = row.secondTwoUserId
        secondReplyParams.value.secondOneNickname = row.secondTwoNickname
        secondReplyParams.value.secondOneAvatar = row.secondTwoAvatar
    }
};

//删除的图片名数组,防止垃圾图片残留
const imgDelName = ref<any>([])

//接收子组件传过来的值并新增聊天记录
const receiveChildContent = (arr: string) => {
    reply.value.content = arr[0]
    secondReplyParams.value.content = arr[0]
    imgDelName.value = arr[1]
}

//一级评论所需的参数
const reply = ref<Reply>({
    problemId: problemId,
    content: '',
    userId: 0,
    nickname: '',
    avatar: ''
})

//对话框点击遮罩层或右上角叉或取消按钮的回调(一级评论)
const handleCancelFirstReply = () => {
    //删除多余图片
    deleteImg(imgDelName.value).then(() => {
    })
    //清除富文本编辑器内容
    Publish.publish('clearContent')
    reply.value.content = '<p></p>'
}

//对话框点击确定回调(一级评论)
const handleOkFirstReply = () => {
    //校验消息是否为空
    let checkContent = getText(reply.value.content)
    if (isNull(checkContent)) {
        message.warn('内容不能为空！')
    } else {
        confirmLoading.value = true;
        setTimeout(() => {
            visibleFirstReply.value = false;
            confirmLoading.value = false;
            //保存用户回复的消息
            handleReply(reply.value).then((res: any) => {
                message.success(res.data.message)
                //评论数+1
                problem.value.reply = problem.value.reply + 1
                //清除富文本编辑器内容
                Publish.publish('clearContent')
                reply.value.content = '<p></p>'
                handleFirstAndSecondReply()
            })
            //删除多余图片
            deleteImg(imgDelName.value).then(() => {
            })
        }, 1000);
    }
};

//二级评论需要的参数
const secondReplyParams = ref<SecondReplyParams>({
    problemId: problemId,
    firstId: 0,
    secondUserId: -1,
    secondOneNickname: '',
    secondOneAvatar: '',
    secondTwoUserId: 0,
    secondTwoNickname: '',
    secondTwoAvatar: '',
    content: ''
})

//对话框点击遮罩层或右上角叉或取消按钮的回调(二级评论)
const handleCancelSecondReply = () => {
    //删除多余图片
    deleteImg(imgDelName.value).then(() => {
    })
    //清除富文本编辑器内容
    Publish.publish('clearContent')
    reply.value.content = '<p></p>'
}

//对话框点击确定回调(二级评论)
const handleOkSecondReply = () => {
    //校验消息是否为空
    let checkContent = getText(reply.value.content)
    if (isNull(checkContent)) {
        message.warn('内容不能为空！')
    } else if (secondReplyParams.value.firstId === 0 || secondReplyParams.value.secondTwoUserId === 0) {
        message.error('网络异常，请稍后重试！')
    } else {
        confirmLoading.value = true;
        setTimeout(() => {
            visibleSecondReply.value = false;
            confirmLoading.value = false;
            //清除富文本编辑器内容
            Publish.publish('clearContent')
            //保存用户回复的消息
            secondReply(secondReplyParams.value).then((res) => {
                message.success(res.data.message)
                reply.value.content = '<p></p>'
                handleFirstAndSecondReply()
            })
            //删除多余图片
            deleteImg(imgDelName.value).then(() => {
            })
        }, 1000);
    }
};

//对话框点击遮罩层或右上角叉或取消按钮的回调(多级评论)
const handleCancelMuchReply = () => {
    //删除多余图片
    deleteImg(imgDelName.value).then(() => {
    })
    //清除富文本编辑器内容
    Publish.publish('clearContent')
    reply.value.content = '<p></p>'
}

//对话框点击确定回调(多级评论)
const handleOkMuchReply = () => {
    //校验消息是否为空
    let checkContent = getText(reply.value.content)
    if (isNull(checkContent)) {
        message.warn('内容不能为空！')
    } else if (secondReplyParams.value.firstId === 0 || secondReplyParams.value.secondTwoUserId === 0) {
        message.error('网络异常，请稍后重试！')
    } else {
        confirmLoading.value = true;
        setTimeout(() => {
            visibleSecondReply.value = false;
            confirmLoading.value = false;
            //清除富文本编辑器内容
            Publish.publish('clearContent')
            //保存用户回复的消息
            secondReply(secondReplyParams.value).then((res) => {
                message.success(res.data.message)
                reply.value.content = '<p></p>'
                handleFirstAndSecondReply()
            })
            //删除多余图片
            deleteImg(imgDelName.value).then(() => {
            })
        }, 1000);
    }
};

//保存用户浏览问题记录所需的参数
const browse = ref<Browse>({
    userId: 0,
    problemId: problemId
})

//保存用户浏览问题记录
const handleSaveUserBrowse = () => {
    if (browse.value.userId != 0) {
        saveUserBrowse(browse.value).then(() => {
        })
    } else {
        return
    }
}

//获取用户id和昵称
const getUserIdAndNicknameAndAvatar = () => {
    if (cookie.get('userinfo') != null) {
        reply.value.userId = JSON.parse(cookie.get('userinfo')).id
        replyGiveALike.value.userId = JSON.parse(cookie.get('userinfo')).id
        secondReplyParams.value.secondTwoUserId = JSON.parse(cookie.get('userinfo')).id
        secondReplyParams.value.secondTwoNickname = JSON.parse(cookie.get('userinfo')).nickname
        secondReplyParams.value.secondTwoAvatar = JSON.parse(cookie.get('userinfo')).avatar
        browse.value.userId = JSON.parse(cookie.get('userinfo')).id
        reply.value.nickname = JSON.parse(cookie.get('userinfo')).nickname
        reply.value.avatar = JSON.parse(cookie.get('userinfo')).avatar
        invite.value.inviter = JSON.parse(cookie.get('userinfo')).id
        report.value.userId = JSON.parse(cookie.get('userinfo')).id
    } else {
        reply.value.userId = 0
        replyGiveALike.value.userId = 0
        secondReplyParams.value.secondTwoUserId = 0
        secondReplyParams.value.secondTwoNickname = ''
        secondReplyParams.value.secondTwoAvatar = ''
        browse.value.userId = 0
        reply.value.userId = 0
        reply.value.nickname = ''
        invite.value.inviter = 0
        report.value.userId = 0
    }
}

getUserIdAndNicknameAndAvatar()
getProblem()
handleUserIsReportProblem()
handleFirstAndSecondReply()
handleRecommendList()
onMounted(() => {
    handleSaveUserBrowse()
})
</script>

<style lang="less" scoped>
.main {
  height: 100%;
  width: 100%;

  .main_header {
    height: 70px;
    position: fixed;
    width: 100%;
    z-index: 99999;
  }

  .main_body {
    display: flex;
    margin-left: 15%;
    margin-right: 15%;
    word-break: break-all;

    .main_left {
      margin-top: 1%;
      width: 100%;
      flex: 7;
      background-color: #ffffff;

      .main_left_title {
        font-size: 20px;
        border-bottom: 1px solid #f0f0f0;
        padding: 5px;

        .main_left_title_body {
          width: 95%;

          .main_left_title_img {
            width: 30px;
            height: 30px;
            float: right;
            margin-right: -5%;
            margin-bottom: 5px;
          }
        }
      }

      .main_left_button {
        display: flex;
        margin-top: 10px;
        margin-left: 5px;

        .main_left_button_4 {
          margin-left: auto;
          margin-right: 20px;
        }
      }

      .main_left_statistical {
        display: flex;
        margin-top: 10px;
        font-size: 15px;
        padding: 5px;
        border-bottom: 1px solid #f0f0f0;

        .main_left_statistical_2 {
          margin-left: 5%;
        }

        .main_left_statistical_3 {
          margin-left: 5%;
        }
      }

      .main_left_answer {
        border-bottom: 1px solid #f0f0f0;
        padding: 10px;
      }

      .main_left_answer_body {
        width: 95%;

        .main_left_answer_body_one_for:nth-child(1) {
          .main_left_answer_body_one {
            .main_left_answer_body_one_nickname:after {
              content: "热评";
              color: red;
              margin-left: 10px;
              font-style: italic;
            }
          }
        }

        .main_left_answer_body_one {
          display: flex;

          .main_left_answer_body_one_img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-left: 10px;
          }

          .main_left_answer_body_one_nickname {
            margin-top: 10px;
            font-weight: bold;
            margin-left: 5px;
          }

          .main_left_answer_body_one_createTime {
            margin-top: 5px;
            margin-left: 5px;
          }
        }
      }

      .main_left_answer_body_two_content {
        margin-left: 3%;
        margin-top: 5px;
        font-size: 20px;
      }

      .main_left_answer_body_three {
        margin-left: 5%;
        margin-bottom: 10px;
        display: flex;

        .main_left_answer_body_three_like_if {
          display: flex;

          .main_left_answer_body_three_like_img {
            width: 30px;
            height: 30px;
            cursor: pointer;
          }

          .main_left_answer_body_three_like_count {
            margin-left: 5px;
            margin-top: 5px;
          }
        }

        .main_left_answer_body_three_reply {
          margin-left: 20px;
        }

        .main_left_answer_body_three_top {
          margin-left: 20px;
        }

      }

      .main_left_answer_body_four {
        margin-left: 50px;

        .main_left_answer_body_four_for {
          display: flex;

          .main_left_answer_body_four_img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
          }

          .main_left_answer_body_four_img_2 {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-left: 10px;
          }

          .main_left_answer_body_four_nickname {
            margin-top: 10px;
            font-weight: bold;
            margin-left: 5px;
          }

          .main_left_answer_body_four_nickname_2 {
            margin-top: 15px;
            font-weight: bold;
            margin-left: 5px;
          }

          .main_left_answer_body_four_createTime {
            margin-top: 5px;
            margin-left: 5px;
          }

          .main_left_answer_body_four_for_reply {
            margin-top: 20px;
            margin-left: 10px;
          }
        }

        .main_left_answer_body_four_content {
          margin-left: 3%;
          margin-top: 5px;
          font-size: 20px;
        }

        .main_left_answer_body_four_nickname_reply_2 {
          margin-left: 20px;
          margin-bottom: 10px;
        }

      }

    }

    .main_right {
      margin-top: 6%;
      //flex: 3;
      position: fixed;
      top: 10px;
      margin-left: 49%;
      width: 355px;

      .main_right_user {
        box-shadow: rgba(3, 102, 214, 0.3) 0 0 0 3px;
        margin-top: 10%;
        padding: 10px;
        background-color: #ffffff;
        margin-left: 10px;

        .main_right_user_title {
          border-bottom: 1px solid #f0f0f0;
          text-align: center;
          font-size: 20px;
          font-weight: bold;
        }

        .main_right_user_body_1 {
          display: flex;
          border-bottom: 1px solid #f0f0f0;

          .main_right_user_body_1_avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 5px;
          }

          .main_right_user_body_1_nickname {
            line-height: 85px;
            width: 90%;
            font-size: 15px;
            font-weight: bold;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

        .main_right_user_body_2 {
          display: flex;
          text-align: center;
          margin-top: 3%;

          .main_right_user_body_2_1 {
            flex: 1;

            .main_right_user_body_2_1_count {
              font-weight: bold;
              font-size: 20px;
            }
          }

          .main_right_user_body_2_2 {
            flex: 1;

            .main_right_user_body_2_2_count {
              font-weight: bold;
              font-size: 20px;
            }
          }

          .main_right_user_body_2_3 {
            flex: 1;

            .main_right_user_body_2_3_count {
              font-weight: bold;
              font-size: 20px;
            }
          }
        }
      }
    }
  }
}
</style>